<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="— THE END —"
      @load="getData"
      class="album"
      :style="
        'top:' +
        (topheight + 60) +
        'px;height:calc(100vh - ' +
        (topheight + 60) +
        'px);width:100%;overflow:auto;'
      "
    >
      <div class="albumlist">
        <div class="list" v-for="(item, index) in list" :key="index">
          <img class="xp" :src="item" alt="" srcset="" />
          <img
            class="del"
            src="@/assets/myicon/del-white.png"
            @click="del(item)"
            alt=""
          />
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
    </van-list>
    <div class="bnt">
      <van-uploader :before-read="beforeRead">
        <van-button
          type="primary"
          block
          color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)"
          >上传我的照片</van-button
        >
      </van-uploader>
    </div>

    <van-popup
      v-model="isShow"
      @cancel="isShow = false"
      round
      position="bottom"
    >
      <profilePictureUpload
        v-if="isShow"
        :file="file"
        @beforeReadx="beforeRead"
        @uploadImgSuccess="uploadImgSuccess"
        @onclose="onclose"
      >
      </profilePictureUpload>
    </van-popup>
  </div>
</template>

<script>
import { getAlbumList, addAlbumList, delAlbumList } from '@/api/index'
import profilePictureUpload from '@/components/profilePictureUpload.vue'

export default {
  components: {
    profilePictureUpload,
  },
  data() {
    return {
      border: '',
      widthPx: '28px',
      heightPx: '28px',
      topheight: 0,
      isActive: 0,
      isShow: false,
      title: 'ta的相册',
      isActive: 0,
      file: '',
      loading: false,
      finished: false,
      deldata: {
        album: '',
      },
      adddata: {
        albums: [],
      },
      searchParameter: {
        //  * 城市编码  为空为首页检索接口
        type: '',

        // * 经度 必填
        lng: '',
        // * 纬度 必填
        lat: '',

        page: 1,
        limit: 10,
      },
      list: [],
    }
  },
  mounted() {
    this.topheight = document.getElementById('van-bar').offsetHeight
    this.$nextTick(() => {
      this.getData()
    })
  },

  methods: {
    del(e) {
      delAlbumList(e).then((res) => {
        // this.list = list.concat(...res.data.list)
        console.log(res)
        this.getData()
        // 加载状态结束
      })
    },
    uploadImgSuccess(value) {
      this.adddata.albums = [value.url]
      console.log(this.adddata)
      addAlbumList({ ...this.adddata }).then((res) => {
        // this.list = list.concat(...res.data.list)
        console.log(res)
        this.getData()
        // 加载状态结束
      })
      this.isBuddhaShow = false
      this.isShow = false
    },
    beforeRead(file) {
      this.isShow = false
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$toast('请上传 jpg、png 格式图片')
        return false
      }
      this.$nextTick(() => {
        this.file = file
        console.log(this.file)
        this.isShow = true
      })
      return true
    },
    onClickLeft() {
      this.$router.back()
    },
    handleUploadSuccess(e) {
      console.log(e)
    },
    qiehuan(e) {
      this.isActive = e
      this.getData()
    },
    onclose() {
      this.isShow = false
    },
    getData() {
      getAlbumList({}).then((res) => {
        this.list = res.data.album_data

        // this.list = list.concat(...res.data.list)
        console.log(res)
        // 加载状态结束
        this.loading = false
        this.finished = true
      })
    },
  },
}
</script>

<style scoped lang="scss">
.active {
  position: relative;
  margin: 8px auto 0 auto;
  width: 194px;
  display: flex;
  height: 36px;
  background: #e8edfc;
  border-radius: 8px;
}
.active div {
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #767676;
}
.isActive {
  width: 96px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 32px !important;
  margin: 2px;
  color: #1a1a1a !important;
}
.xp {
  width: 100%;
  height: 100%;
}
.del {
  width: 24px;
  top: 3px;
  right: 3px;
  height: 24px;
  position: absolute;
}
.bnt {
  width: 343px;
  height: 50px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
  border-radius: 8px;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 50px;
}
.setting {
  padding: 14px 16px;
  box-sizing: border-box;
  background: #e8edfc;
  width: 343px;
  height: 66px;
  margin: 0 auto;
  /* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
  border-radius: 8px;
  border: 1px solid rgba(82, 117, 241, 0.3);
}
.glance {
  position: absolute;
}
.bg {
  width: 375px;
  height: 88px;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
}
.albumlist {
  width: 345px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  // justify-content: space-between;
}

.list {
  position: relative;
  border-bottom: #d8d8d8 solid 1px;
  overflow: hidden;
  width: 110px;
  height: 110px;
  margin-top: 6px;
  margin-right: 5px;
  border-radius: 4px;
}

.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
::v-deep .van-uploader {
  display: block !important;

  & .van-uploader__wrapper {
    display: block !important;
  }
}
</style>
